import { Button, Checkbox, Input, Select } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import Tab from "../../base/Table";
import "./index.css";

const CommunityList = () => {
  //复选框
  const onChanges = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //input
  const { Search } = Input;
  const onSearch = (value: string) => console.log(value);
  return (
    <div className="CommunityListbox">
      <div className="CommunityListmain">
        <div className="CommunityListmaintop">
          <div className="one">
            <p>区域</p>
            <p>
              <Select
                showSearch
                placeholder="--请选择.."
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option?.label ?? "")
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }
                options={[
                  {
                    value: "海口",
                    label: "海口",
                  },
                  {
                    value: "三亚",
                    label: "三亚",
                  },
                  {
                    value: "琼海",
                    label: "琼海",
                  },
                  {
                    value: "万宁",
                    label: "万宁",
                  },
                  {
                    value: "广州",
                    label: "广州",
                  },
                  {
                    value: "深圳",
                    label: "深圳",
                  },
                  {
                    value: "厦门",
                    label: "厦门",
                  },
                  {
                    value: "泉州",
                    label: "泉州",
                  },
                  {
                    value: "东莞市",
                    label: "东莞市",
                  },
                  {
                    value: "西城区",
                    label: "西城区",
                  },
                ]}
              />
            </p>
          </div>
          <div className="tow">
            <p>状态</p>
            <p>
              <Select
                showSearch
                placeholder="-所有-"
                optionFilterProp="children"
                filterOption={(input, option) =>
                  (option?.label ?? "")
                    .toLowerCase()
                    .includes(input.toLowerCase())
                }
                options={[
                  {
                    value: "所有",
                    label: "所有",
                  },
                  {
                    value: "启用",
                    label: "启用",
                  },
                  {
                    value: "禁用",
                    label: "禁用",
                  },
                ]}
              />
            </p>
          </div>
          <div className="third">
            <p>关键词</p>
            <p>
              <Search
                placeholder="输入关键词搜索"
                enterButton="Search"
                size="large"
                onSearch={onSearch}
              />
            </p>
          </div>
        </div>
        <div className="CommunityListmainbottom">
          <Tab />
        </div>
      </div>
      <div className="CommunityListfoot">
        <Checkbox onChange={onChanges}>全选/反选</Checkbox>
        <Button type="primary" danger>
          删除
        </Button>
      </div>
    </div>
  );
};

export default CommunityList;
